<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<body>
    <button data-action="up" style="margin-bottom: 30px;width: 100%;height: 110px;">音量+</button>
    <br>
    <button data-action="down" style="margin-bottom: 30px;width: 100%;height: 110px;">音量-</button>
    <br>
    <button data-action="previous" style="margin-bottom: 30px;width: 100%;height: 110px;">上一个</button>
    <br>
    <button data-action="next" style="margin-bottom: 30px;width: 100%;height: 110px;">下一个</button>
    <br>
    <button data-action="pauseOrPlay" style="margin-bottom: 30px;width: 100%;height: 110px;">暂停/播放</button>
    <br>
</body>

<script>
    document.querySelectorAll('button[data-action]').forEach(button => {
        button.addEventListener('click', () => {
            const action = button.getAttribute('data-action');
            fetch(`${window.location.origin}/${action}`)
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                })
                .catch(error => {
                    alert('Error fetching data:', error);
                });
        });
    });
</script>

</html>